React Component Library from scratch - Project

프로젝트 생성

폴더를 생성하고 npm 신규 프로젝트 생성

mkdir react-component-library
cd react-component-library
npm init -y

React와 Emotion을 peerDependencies에 추가하자. peerDependencies인 이유는 npm과 yarn에 현재 dependency가 호환이 되는지 알려줄 수 있고 패키지에 번들되어 들어가지 못하게 하기 위해.

npm i -D react react-dom @emotion/react @emotion/styled

@emotion/core가 @emotion/react로 이름이 변경되었으니 변경된 패키지명으로 받는다.

하고나서 package.json열고 peerDependencies에 직접 추가해줘야한다.

  "peerDependencies": {
    "@emotion/react": "^11.0.0",
    "@emotion/styled": "^11.3.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },

Styleguidist를 이용한 live development환경

Styleguidist는 컴포넌트 개발시에 자동 새로고침과 미리보기를 지원해준다.

npm install --save-dev react-styleguidist webpack

Styleguidist는 Babel하고 관련 설정을 해야 작동한다.

npm install --save-dev \
            babel-loader \
            @babel/core \
            @babel/preset-env \
            @babel/preset-react

.babelrc를 추가한다.

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

styleguide.config.js를 추가한다.

module.exports = {
  webpackConfig: {
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: "babel-loader"
        }
      ]
    }
  },
};

StyleGuidist의 내부 webpack이 babel 로더를 사용하게끔 설정해주는 것이다.

이제 "start" : "styleguidist server" 스크립트를 package.json에 추가하고 실행해보자. npm start

스크립트 실행 뒤 이 페이지(http://localhost:6060/)에서 확인할 수 있다. Styleguidist 환영 페이지가 뜰 것이다.

페이지에 나오는대로 components를 자동적으로 띄울 경로를 지정해주면 된다.

컴포넌트 추가해보기

위의 설정대로라면 src/components 경로에 컴포넌트를 읽는 것으로 설정을 했을 것이다. 경로가 없다면 만들어주고 새로운 컴포넌트를 하나 만들어보자

import React from "react";

export default function Button({text}) {
    return <button>{text}</button>;
}

그럼 이런 화면이 나타날 것이다. 아직 아무것도 없지만 여기에 컴포넌트에 대한 설명과 예시를 작성할 수 있다.

Button.md파일을 같은 경로에 추가하고 styleguidist를 재시작해보자

아주 간단한 버튼 예시

```jsx
import Button from "./Button";

<Button text="Hello World" />
```(md 안에 코드 블럭임)

컴포넌트에 스타일 추가

다음을 설치하고 .babelrc에 "plugins": ["@emotion"]을 추가한다.

npm i -D @emotion/babel-plugin

Button.js의 내용에 스타일을 추가해보자

import React from "react";
import styled from "@emotion/styled";

const Wrapper = styled.button`
  text-transform: uppercase;
  font-size: 1.5em;
  font-weight: bold;
  letter-spacing: 4px;
  background: #5cdb95;
  color: #05385b;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
`;

export default function Button({ text }) {
  return <Wrapper>{text}</Wrapper>;
}

버튼에 녹색 배경이 생긴 것을 확인할 수 있다.

코드 정리

스타일의 경우 한 컴포넌트 라이브러리에서 공통적으로 쓰이는 경우가 있다. 배경 색상이라던가 테마 색상이라던가. 그렇기 때문에 스타일을 따로 분리해 두는 것이 좋다.

src/config/styles.js 를 생성하고 버튼에 있던 스타일을 다음과 같이 분리해보자

import { css } from "@emotion/react";

export const font = css`
  text-transform: uppercase;
  font-size: 1.5em;
  font-weight: bold;
  letter-spacing: 4px;
`;

export const shape = css`
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
`;

export const primaryColors = css`
  background: #5cdb95;
  color: #05385b;
`;

분리한 내용을 버튼에 다시 불러오자

import React from "react";
import styled from "@emotion/styled";
import { font, primaryColors, shape } from "../config/styles";

const Wrapper = styled.button`
  ${font}
  ${primaryColors}
  ${shape}
`;

export default function Button({ text }) {
  return <Wrapper>{text}</Wrapper>;
}

경로 설정

다음 플러그인은 babel이 transpile할 때 내가 지정한 절대경로를 인식할 수 있도록 해준다. 공식 설명에 따르면 새로운 루트 경로를 추가 해주는 것.

npm i babel-plugin-module-resolver

.babelrc에 module-resolver를 추가면 다음과 같을 것이다.

{
    "plugins": ["@emotion", ["module-resolver", { "root": ["./src"] }]],
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Button.jsx에서

import { font, primaryColors, shape } from "../config/styles";

를 다음과 같이 바꿀 수 있다.

import { font, primaryColors, shape } from "config/styles";

추가

콘솔 에러 해결

[[React Component Library from scratch - Testing Environment]]

참조한 글